<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 400px;
        height: 200px;
        border: 2px dashed rgb(175, 19, 66);
        margin: 100px auto;
      }
      .gift {
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        color: red;
        background-color: pink;
        text-align: center;
      }
      .button {
        margin: 10px 80px;
      }
      button {
        width: 100px;
        height: 50px;
        background-color: rgb(69, 69, 180);
        color: white;
        font-size: 18px;
        border-radius: 10px;
        margin-right: 10px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="gift">开始抽奖了！</div>
      <div class="button">
        <button id="start">开始</button>
        <button id="stop">停止</button>
      </div>
    </div>

    <script>
      //需求：用js写一个抽奖程序，奖品自定，点击开始按钮开始随机，点击停止按钮停止随机出现奖品。
      var gifts = [
        "一等奖",
        "二等奖",
        "二等奖",
        "三等奖",
        "三等奖",
        "三等奖",
        "再接再厉",
        "再接再厉",
        "再接再厉",
        "再接再厉",
        "再接再厉",
        "再接再厉",
        "再接再厉",
        "再接再厉",
        "再接再厉",
        "再接再厉",
        "再接再厉",
      ];
      var gift = document.querySelector(".gift");
      var start = document.querySelector("#start");
      var stop = document.querySelector("#stop");
      var timer = null; //定义计时器名称
      //抽奖
      start.onclick = function () {
        //单击事件
        timer = setInterval(function () {//立即执行函数
          //设置计时器
          for (var i = 0; i < gifts.length; i++) {
            gift.innerHTML = gifts[Math.ceil(Math.random() * gifts.length)]; //添加数据
          }
        }, 50); //50ms刷新一次
      };
      //停止抽奖
      stop.onclick = function () {
        clearInterval(timer); //中止计时器
      };
    </script>
  </body>
</html>
